import { ElButton, ElForm, ElFormItem, ElInput, ElOption, ElSelect, FormInstance, FormRules } from "element-plus"
import { cloneDeep } from "lodash-es"
import { Dialog } from "~/src/api/interface"
import { User } from "~/src/api/interface/user"
import { createRoleBackAPI, editRoleBackAPI } from "~/src/api/user"
import { accountType } from "~/src/utils/serviceDict"
import VabDialog from '/@vab/components/VabDialog/index.vue'

export type AddDialogExpose = {
  setParams: (data: Dialog<User.RoleBack>) => void;
};
export default defineComponent({
  name: "RoleBackDialog",
  setup(props, { expose, emit }) {
    const formdata = ref<Dialog<User.RoleBack>>({data:{roleCode:"",roleName:"",comments:"", categoryId:1},title:"",visible:false})
    const setParams = async (data: Dialog<User.RoleBack>) => {
      formdata.value.title = data.title
      formdata.value.data = cloneDeep(data.data)
      formdata.value.visible = true
      }
    const rules = reactive<FormRules>({
      roleName:[{required:true,message:'请输入名称',trigger:'blur'}],
    })
    const formRef = ref<FormInstance>()
    watch(() => formdata.value.visible, (val) => {
      if (!val) {
        formRef.value?.resetFields()
      }
    })

      const onSubmit = async () => {
        await formRef.value?.validate()
        if (formdata.value.data.id) {
          await editRoleBackAPI(formdata.value.data)
        } else {
          await createRoleBackAPI(formdata.value.data)
        }
        emit("onOk")
        formdata.value.visible = false
      }

//       const departmentList = ref<StoreManagement.DepartmentList[]>([]);
//       const getDepartment = async() => {
//         const { data } = await getDepartmentAPI({ pageNum: 1, pageSize: 9999 })
//         departmentList.value = data.list
//         if(!formdata.value.data.id)formdata.value.data.categoryId = departmentList.value[0].id
// }
    expose<AddDialogExpose>({ setParams })
    return () =>

    <VabDialog v-model:modelValue={formdata.value.visible} title={formdata.value.title + '后台角色'} width="500"
    v-slots={{ footer: () => (
      <>
        <ElButton type="primary" onClick={onSubmit}>保存</ElButton>
        <ElButton onClick={()=> formdata.value.visible = false}>取消</ElButton>
      </>
        )
        }}
      >
      {
      <ElForm ref={formRef} rules={rules} model={formdata.value.data} label-width={80}>
        <ElFormItem prop={'roleName'} label="角色名称">
        <ElInput v-model={formdata.value.data.roleName}></ElInput>
        </ElFormItem>
        <ElFormItem prop={'roleCode'} label="角色编码">
        <ElInput v-model={formdata.value.data.roleCode}></ElInput>
        </ElFormItem>
            <ElFormItem prop={'categoryId'} label="角色类型">
              <ElSelect v-model={formdata.value.data.categoryId}>
                {accountType.map(item => (
               <ElOption label={item.label} value={item.value} key={item.value}></ElOption>
             ) )}
              </ElSelect>
        </ElFormItem>
        <ElFormItem prop={'comments'} label="备注">
        <ElInput type="textarea" v-model={formdata.value.data.comments}></ElInput>
        </ElFormItem>
      </ElForm>
}
    </VabDialog >
  }
})
